<template>
  <CompOperate
      :field="field"
      :designer="designer"
      :design-state="designState"
      :parent-list="parentList"
      :parent-widget="parentWidget"
      :sub-form-row-id="subFormRowId"
      :sub-form-row-index="subFormRowIndex"
      :sub-form-col-index="subFormColIndex"
      :index-of-parent-list="indexOfParentList"
      :display-style="field.options.displayStyle"
  >
    <div class="scene-waiting-dual-queue-widget">
      <div class="list-inside" v-for="(items,index) in waitingPatientInfos" :key="index">
        <div class="header-area waiting-item"
             :style="getStyle('head')"
             v-if="(optionsInfo.headShow)"
        >
          <template v-for="(item) in (optionsInfo.colOptions)">
            <div class="item" v-if="getColShow(item.value)" :class="getClassName(item.value)">
              {{ item.label }}
            </div>
          </template>
        </div>
        <div class="list-area" :style="getStyle('list')">
          <template v-for="(item,key) in (items)">
            <div class="waiting-item" :style="getStyle('listItem')">
              <template v-for="(items) in (optionsInfo.colOptions)">
                <template v-if="getColShow(items.value)">
                  <div class="item" :class="getClassName(items.value)">
                    <template
                        v-if="(items.value!=='treatingPatient')&&
                      (items.value!=='waitPatientList')&&
                      (items.value!=='treatmentRoomName')"
                    >
                      <!--号别-->
                      <template v-if="(items.value==='registerObjNames')">
                        <ScrollX>
                          {{ item[optionsInfo.registerObjNameKey] || item['registerObjName'] }}
                        </ScrollX>
                      </template>
                      <template v-if="(items.value!=='registerObjNames')">
                           <span class="content"
                                 :key="item[items.value]"
                                 :class="{'item-inside':(optionsInfo.itemShadow)}"
                           >
                              {{ item[items.value] || '\u00a0' }}
                           </span>
                      </template>
                    </template>

                    <!--诊室-->
                    <template v-if="item[items.value]&&(items.value==='treatmentRoomName')">
                      <span :key="item[items.value]">
                        <ScrollX>{{ item[optionsInfo.roomNameKey] || item[items.value] || '\u00a0' }}</ScrollX>
                      </span>
                    </template>


                    <!--当前患者-->
                    <template v-if="items.value==='treatingPatient'">
                      <span class="content">
                        <ScrollX>{{ getCurrentPatient(item) }}</ScrollX>
                      </span>
                    </template>
                    <!--等待患者-->
                    <template v-if="items.value==='waitPatientList'">
                      <template v-if="(optionsInfo.openScroll)">
                        <vue-seamless-scroll
                            :ref="`scroll-${item.workerId}`"
                            class="scroll"
                            @ScrollEnd="handleScrollEnd"
                            :class-option="classOptionTips"
                            :data="item.waitPatientList"
                        >
                          <div class="inside-content">
                          <span class="patient" v-for="(item,key) in (item.waitPatientList)"
                                :key="`${(item.queuingId)}-${key}`">
                            <template v-if="!!(item.orderNo)">
                              {{ item.orderNo || '\u00a0' }}
                            </template>
                            <template v-if="!!(item.patientName)">
                              {{ item.patientName || '\u00a0' }}
                            </template>
                          </span>
                          </div>
                        </vue-seamless-scroll>
                      </template>
                      <template v-else>
                        <div class="no-scroll">
                          <div class="inside-content">
                          <span class="patient" v-for="(item) in (item.waitPatientList)"
                                :key="`${(item.queuingId)}-${key}`">
                            <template v-if="!!(item.orderNo)">
                                {{ item.orderNo || '' }}
                            </template>
                             <template v-if="!!(item.patientName)">
                                {{ item.patientName || '' }}
                            </template>
                          </span>
                          </div>
                        </div>
                      </template>
                    </template>
                  </div>
                </template>
              </template>
            </div>
          </template>

        </div>
      </div>
    </div>
  </CompOperate>
</template>

<script>
import {pxToVw} from "@/utils/common";
import emitter from "@/utils/designer/emitter";
import vueSeamlessScroll from 'vue-seamless-scroll';
import CompOperate from "@c/public/form-designer/devType/modules/compOperate.vue";
import ScrollX from '@c/public/seamlessScroll/ScrollX.vue'
import mixin from "@sc/templateDetails/modules/homeMiddle/fieldMixin";
import {buildParentApi} from "@/utils/designer/util";
let buildParent = buildParentApi();
export default {
  name: "scene-waiting-dual-queue-widget",

  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件

  mixins: [emitter, mixin],

  components: {
    ScrollX,
    CompOperate,
    vueSeamlessScroll,
  },

  props: {
    widget: Object,
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false,
    },
    devType: {
      type: Boolean,
      default: false,
    },

    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */ type: String,
      default: "",
    },

    headTitle: {
      type: String,
      default: "",
    },
    visibleTitle: {
      type: Boolean,
    },
  },

  data() {
    return {
      optionsInfo: Object(),
    }
  },


  computed: {
    // 温馨提示的滚动
    classOptionTips() {
      let {openScroll, waitingNumber, waitingVisitStep} = (this.optionsInfo)
      return {
        step: [1, 1.5, 2, 2.5, 3][waitingVisitStep - 1], // 数值越大速度滚动越快
        hoverStop: true,
        limitMoveNum: openScroll ? waitingNumber : 999999, // 开始无缝滚动的数据量 this.dataList.length
        direction: 2 // 0向下 1向上 2向左 3向右
      };
    },

    // 栏目是否显示
    getColShow() {
      return function (val) {
        const self = this;
        let arr = (self.optionsInfo?.defaultShowCol) || Array();
        return arr.includes(val);
      };
    },

    // 配置动态的className
    getClassName() {
      return function (val) {
        switch (val) {
          case "treatingPatient":
            return "current-patient";
          case "waitPatientList":
            return "wait-patient";
          case "waitPatientCount":
            return "patient-count";
          case "registerObjNames":
            return "register-name";
          case 'deptName':
            return "deptName-name";
        }
      };
    },

    // 定义配置的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let info = (self.optionsInfo) || Array();
        let Obj = Object();
        switch (val) {
          case "head":
            Reflect.set(Obj, "color", (info.headerFontColor));
            Reflect.set(Obj, "height", pxToVw(info.headHeight));
            Reflect.set(Obj, "lineHeight", pxToVw(info.headHeight));
            Reflect.set(Obj, "backgroundColor", (info.headerBackgroundColor));
            return Obj;
          case "list":
            Reflect.set(Obj, "height", pxToVw(info.contentHeight));
            return Obj;
          case "listItem":
            Reflect.set(Obj, "lineHeight", pxToVw(info.lineHeight));
            Reflect.set(Obj, "height", pxToVw(info.lineHeight));
            return Obj;
        }
      };
    },

    // 获取列表的数据
    waitingPatientInfos() {
      let listInfo = Array();
      let devType = (this.devType);
      let {showRowNums} = (this.optionsInfo)
      let WaitingPatienList = this.$store.getters['getWaitingPatientInfo'];
      if (devType) {
        listInfo = WaitingPatienList.apiData.slice(0, showRowNums * 2);
        let fillArr = (new Array(showRowNums * 2 - listInfo.length).fill({}));
        let mergeArr = [...listInfo, ...fillArr];
        return this.$lodash.chunk(mergeArr, showRowNums);
      } else {
        // 截取返回的数组
        listInfo = WaitingPatienList.mockData.slice(0, showRowNums * 2);
        // 如果不够截取的长度 补足空对象
        let fillArr = (new Array(showRowNums * 2 - listInfo.length).fill({}));
        let mergeArr = [...listInfo, ...fillArr];
        return this.$lodash.chunk(mergeArr, showRowNums);
      }
    },

    // 当前就诊的患者|| 医生暂停接诊
    getCurrentPatient() {
      return function (val) {
        /**
         * 在线状态 0在线 1暂停 2退出
         */
        let type = parseInt(val.onlineStatus);
        switch (type) {
          case 0:
          case 2:
            if (!!(val.treatingPatient)&&!!(val.treatingPatient.length)) {
              let currentPatient = Array();
              (val.treatingPatient).forEach((item)=>{
                let temp = `${(item.orderNo) || '\u00a0'} ${(item.patientName) || '\u00a0'}`
                currentPatient.push(temp)
              })
              return (this.$lodash.join(currentPatient,' '));
            } else {
              return '\u00a0'
            }
          case 1:
            return '暂停接诊';
        }
      }
    },
  },

  mounted() {
    this.handleOnMounted();
  },

  methods: {
    // 等待候诊滚动结束
    handleScrollEnd() {
      console.log('等待就诊滚动结束');
    },

    // 接收父组件传递过来的数据
    async executeMethod(key, data) {
      switch (key) {
        case "patientListInfo":
          console.log(`患者列表-数据处理逻辑-${data}`);
          let patientList = this.$lodash.cloneDeep(data);
          buildParent.executeParentMethod('writeLog', JSON.stringify({sign:'模板-患者信息',key:key,data:data}));
          await this.$store.dispatch('setWaitingPatientInfo', patientList)
          break
      }
    },

  },

  watch: {
    // 获取配置项
    field: {
      handler: function (val) {
        this.optionsInfo = (val.options.waitingDualQueueInfoConfig);
      },
      deep: true,
      immediate: true
    },
  },

  destroyed() {
    this.unregisterFromRefList();
  },

};
</script>

<style lang="scss" scoped>
.scene-waiting-dual-queue-widget {
  background-color: transparent;
  color: #333;
  align-self: center;
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100%;
  line-height: 100%;
  box-sizing: border-box;
  margin: 20px 28px 16px 28px;
  overflow: hidden;

  .list-inside {
    border-radius: 20px !important;
    width: calc(50% - 14px);
    overflow: hidden;
    border: 1px rgba(170, 170, 170, 0.75) solid;

    .header-area {
      width: 100%;
      display: flex;
      background-color: #0059b3;
      color: #fff;
      height: 110px;

      .item {
        font-size: 54px !important;
      }

      .wait-patient {
        display: inline !important;
        align-self: center;
        align-items: center;
        text-align: center;
      }
    }

    .list-area {
      width: 100%;
      display: flex;
      height: auto;
      background: white;
      flex-direction: column;
    }

    .waiting-item {
      display: flex;
      width: 100%;
      align-items: center;
      align-self: center;
      flex-direction: unset;
      border-bottom: 6px rgba(170, 170, 170, 0.35) solid;
      flex-grow: 1;

      &:last-child {
        border-bottom: none;
      }

      .item {
        flex: 2.4;
        font-size: 44px;
        height: 110px;
        padding: 0 30px;
        line-height: 110px;
        @include singleEllipsis(calc(100% - 60px));
        box-sizing: border-box;
        text-align: center;

        .content {
          display: flex;
          height: 100%;
        }

        //诊室滚动
        :deep(.van-notice-bar) {
          @include fontWeight();
          background: transparent;
          height: 100%;
          width: 100%;
          font-size: 44px;

          .van-notice-bar__wrap {
            height: 100%;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            @include fontWeight();
            color: #333333;
            font-size: 44px;
            overflow: hidden;
            width: 100%;

            > div {
              height: 100%;
              display: flex;
              align-items: center;
            }
          }
        }

      }

      .deptName-name,
      .patient-count {
        .item-inside {
          display: inline-block;
          background: rgba(0, 89, 179, 0.2);
          width: 100%;
          height: 82px;
          line-height: 82px;
          border-radius: 20px;
        }
      }

      .current-patient {
        display: flex;
        flex: 2;
        align-self: center;
        align-items: center;
        justify-content: center;

        span {
          background: rgba(0, 89, 179, 0.2);
          border-radius: 14px;
          padding: 10px 26px;
          color: #333333;
          @include singleEllipsis(calc(100% - 12px));
          line-height: 112%;
          height: 80%;
          display: flex;
          justify-content: center;
          align-items: center;
          align-self: center;
        }
      }

      .wait-patient {
        flex: 3;
        overflow: hidden;
        display: flex;
        align-self: center;
        align-items: center;
        padding-right: 20px;

        ::v-deep .scroll {
          width: 100%;
          height: 80px;
          overflow: hidden;

          > div {
            height: 100%;
            overflow: hidden;

            > div {
              height: 100%;
            }
          }

          .inside-content {
            height: 100%;
            display: flex;
            align-self: center;
            align-items: center;
            overflow: hidden;

            .patient {
              height: auto;
              align-self: center;
              align-items: center;
              line-height: inherit;
              overflow: hidden;
              padding-right: 20px;
              font-size: 42px;
            }
          }
        }

        .no-scroll {
          padding-right: 20px;
          overflow: hidden;

          .inside-content {
            height: 100%;
            align-self: center;
            align-items: center;
            overflow: hidden;
            @include singleEllipsis(100%);
            display: block;

            .patient {
              height: auto;
              align-self: center;
              align-items: center;
              line-height: inherit;
              flex-basis: auto;
              padding-right: 20px;
              font-size: 42px;
            }
          }
        }

      }

      .patient-count {
        flex: 0.5;

        .item-inside {
          @include fontWeight();
        }
      }

      .register-name {
        flex: 1.5;
      }

      .waiting-info {
        @include singleEllipsis(100%)
      }
    }
  }
}
</style>